<template>
  <div id="home">

    <h1>{{ msg }}</h1>
    <h2>我是home组件</h2>

    <v-head ref="head"></v-head>

    <br />
    <button @click="broadcastNews()">给news组件广播数据</button>


  </div>
</template>



<script>

  /**
   * 费父子组件之间传值
   * 1.新建一个js文件，然后引入vue，实例化vue，最后暴露这个实力。 
   * 
   * 2.在要广播的地方引入刚才的实例
   * 
   * 3.通过，引入刚才的实例.$emit('名称','数据')
   * 
   * 4.在接收的地方
   *    引入刚才的实例.$on('名称',function(data){
   *      console.log(data);
   *    })
   * 
   * 
   */





  // 引入空的vue
  import VueEvent from "../model/vueEvent.js";

  import Head from "./head.vue";
  export default {
    data() {
      return {
        msg: "home组件"
      };
    },
    methods: {
      broadcastNews() {
        // 广播数据
        VueEvent.$emit("to-news", this.msg);
      }
    },
    components: {
      "v-head": Head
    },
    mounted() {
      console.log("home组件渲染完毕");
      VueEvent.$on("to-home", function (data) {
        console.log(data);
      })
    }
  };
</script>

<style lang="scss">
</style>